<template>
  <div class="pagebody">
    <StickHead></StickHead>
    <div class="headtop bgfff text-al-center fz30">资讯列表</div>

    <div class="headnav">
      <ul class="flex-row flex-wrap">
        <li
          v-for="(item, index) in navlist"
          :key="index"
          :class="index+1 == isnav ? 'isnav' : ''"
          class="justify-center align-center fz24 color000"
          @click="checkNewsType(item,index)"
        >
          {{ item.dictLabel }}
        </li>
      </ul>
    </div>
    <div class="newslist">
      <ul>
        <li @click="toDetail(item.id)" v-for="(item, index) in newslist" :key="index" class="bgfff borderbox flex-col justify-between">
          <div class="title fz22 fwbold lineclamp2">{{ item.newsTitle }}</div>
          <div class="justify-between mt20">
            <div class="color666 fz20">{{ item.createTime.slice(0, 10) }}</div>
            <div class="fz20 color007 ">查看详情 ></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="fz24 bgF4 color909399 align-center justify-center" style="height:0.88rem">没有更多数据了</div>
    <StickFoot :type="'news'"></StickFoot>
  </div>
</template>

<script>
import StickHead from "@/layout/StickHead.vue";
import StickFoot from "@/layout/StickFoot.vue";
import { getDict,getnewsList } from "@/api/api";
export default {
  name: "news",
  components: {
    StickHead,
    StickFoot,
  },
  data() {
    return {
      navlist: [],
      isnav: 0,
      newslist: [],
    };
  },
  mounted() {
    this.getnewsList();
    let data = {
      pageNum:1,
      pageSize:20,
      dictType:'news_type'
    };
    //获取字典数据
    getDict(data).then((response) => {
      this.navlist = response.data.rows;
    });
  },
  methods: {
    toDetail(id) {
      //跳转到详情页
      this.$router.push({name:'newsdetails',params:{id:id}});
    },
    getnewsList() {
      //获取新闻列表
      getnewsList().then((response) => {
        this.newslist = response.data.rows;
      });
    },
    checkNewsType(item,index){
      this.isnav = index+1
      let data = {
        newsType:item.dictValue,
      };
      getnewsList(data).then((response) => {
        this.newslist = response.data.rows;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.pagebody {
  .headtop {
    line-height: 0.8rem;
    height: 0.8rem;
  }
  .headnav {
    background: #f6f7fb;
    ul {
      border-bottom: 2px solid #ccc;
      li {
        width: 1.8rem;
        height: 0.6rem;
        border-bottom: 2px solid #f6f7fb;
      }
      .isnav{
        font-weight: bold;
        color: #409EFF;
        border-bottom: 2px solid #409EFF;
      }
    }
  }
  .newslist{
    ul{
      li{
        height: 1.6rem;
        padding: 0.24rem 0.24rem 0.16rem;
        border-bottom: 1px dashed #dbdbdb;
      }
    }
  }
}
</style>